<template>
    <div class="content-container">
        <Title :icon="'questionnaire-fill'" :title="'问答数据'"></Title>
        <div class="flex h-290px aq-data1">
            <ul class="flex-1">
                <li class="flex items-center">
                    <div class="icons"><img src="@/assets/images/qe.png" alt=""></div>
                    <div class="flex flex-col justify-center">
                        <span class="flex">最近一次达标问题总量<el-tooltip placement="top" content="该数据每7天查询一次，当前数字为最近一次查询的总排名数量">
                    <div slot="content" class="ml-10px">
                        <svg-icon size="14px" icon-class="information-2-fill" class="text-#999"></svg-icon>
                    </div>
                </el-tooltip></span>
                        <p>{{ state.ai }}</p>
                    </div>
                </li>
                <li class="flex items-center">
                    <div class="icons"><img src="@/assets/images/average.png" alt=""></div>
                    <div class="flex flex-col justify-center">
                        <span class="flex">平均达标数量
                            <el-tooltip placement="top">
                                <template #content>从第一次查询到最后一次查询<br />的总达标数量除以总查询次数</template>
                    <div slot="content" class="ml-10px">
                        <svg-icon size="14px" icon-class="information-2-fill" class="text-#999"></svg-icon>
                    </div>
                </el-tooltip>
                        </span>
                        <p>{{ state.average }}</p>
                    </div>
                </li>
                <li class="flex items-center">
                    <div class="icons"><img src="@/assets/images/distillation.png" alt=""></div>
                    <div class="flex flex-col justify-center">
                        <span>更新时间</span>
                        <p>{{ state.updateTime }}</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>

</template>

<script setup lang="ts">
import Title from '@/components/Title/index.vue'
import { getQuestionDataApi } from '@/api/geoBasic/index'

const route = useRoute()

const state = reactive({
    distillation: 0,
    ai: 0,
    average:0,
    updateTime: ''
})

async function getQuestionData(id:any) {
    const res: ResType = await getQuestionDataApi("/GEOBasicCustomerApi/GetKeywordCount",{
        skip:id
    })
    if (res.code === 200) {
        state.distillation = res.data.keywordcount
        state.ai = res.data.aicount
        state.average = res.data.averageRank
        state.updateTime = res.data.updatetime
    }
}

onMounted(() => {
    const { skip } = route.query
    getQuestionData(skip)
})
</script>

<style lang="scss">
.aq-table {
    tr {
        &:nth-child(1) {
            td {
                &:nth-child(1) {
                    mark {
                        color: #fff;
                        background-color: #fc5d55;
                    }
                }
            }
        }

        &:nth-child(2) {
            td {
                &:nth-child(1) {
                    mark {
                        color: #fff;
                        background-color: #ff9e47;
                    }
                }
            }
        }

        &:nth-child(3) {
            td {
                &:nth-child(1) {
                    mark {
                        color: #fff;
                        background-color: #578eff;
                    }
                }
            }
        }

        td {
            mark {
                display: inline-block;
                width: 20px;
                height: 20px;
                line-height: 20px;
                font-size: 12px;
                color: var(--title-color);
                border-radius: 6px 0 6px 6px;
                text-align: center;
                background: none;
            }
        }
    }
}
</style>